<template>
  <div class="bigBox">
    <NavTabs msg="体测成绩查询"></NavTabs>
    <van-pull-refresh  class="mainShow" v-if="ShowOrNot" v-model="loading" @refresh="onRefresh">
      <div class="studentInfo">
        <div class="userInfo">
          <div>学生信息</div>
          <div class="timer">{{}}</div>
        </div>

        <div class="nameaccount">
          <div>姓名：{{ userInfo.name }}（{{ userInfo.sex }}）</div>
          <div>学号：{{ userInfo.account }}</div>
        </div>
      </div>
      <van-divider
        :style="{ color: '#1989fa', borderColor: '#1989fa', padding: '0 16px' }"
      >
       {{router.query.schoolYear}}年体测成绩汇总</van-divider
      >
      <div class="allGarde">
        <van-circle
          :current-rate="currentRate"
          :rate="3"
          :speed="100"
          :text="text"
          :stroke-width="60"
        />
        <div class="scoreLevel">
          <van-button
            class="buttons"
            :type="GradeRule(userInfo.totalTestScore).color"
            >{{ userInfo.totalTestLevel }}</van-button
          >
        </div>
      </div>
      <div class="gardeBox">
        <div class="line" v-for="(item, index) in gradetableData" :key="index">
          <div class="one">
            {{ item.label }}<span class="danwei">({{ item.unit }})</span>
          </div>
          <div class="two" v-if="typeof item.value === 'string'">
            {{ userInfo[item.value] }}
          </div>
          <div class="two" v-else>
            {{ `${userInfo[item.value[0]]}/${userInfo[item.value[1]]}` }}
          </div>
          <div class="three">{{ userInfo[item.score] }}分</div>
          <div class="four">
            <van-tag :type="GradeRule(userInfo[item.score]).color">
              {{ userInfo[item.level] }}
            </van-tag>
          </div>
    
        </div>
      </div>
      <div class="toScoreInfo" @click="toScoreInfo">
        国家学生体质健康标准
      </div>
    </van-pull-refresh>
        <van-pull-refresh  v-else v-model="loading" @refresh="onRefresh">
    <van-empty  description="该学年暂无成绩" />
        </van-pull-refresh>
        
  </div>
</template>
<script lang="ts" setup>
import { Toast } from "vant";
import { computed, onMounted, ref } from "vue";
import NavTabs from "../components/NavTabs.vue";
import { info } from "../request/api";
import { useRouter, useRoute } from "vue-router";
const router = useRoute();
const route = useRouter()
const userInfo = ref<any>({});
const thousandRun = ref<any>({ man: "1000米跑", woman: "800米" });
const sex = ref<string>("女");
const gradetableData = [
  {
    label: "身高/体重",
    value: ["height", "weight"],
    unit: "BMI",
    score: "heightAndWeightScore",
    level: "heightAndWeightLevel",
  },
  {
    label: "肺活量",
    value: "vitalCapacity",
    unit: "毫升",
    score: "vitalCapacityBodyMassScore",
    level: "vitalCapacityWeightLevel",
  },
  {
    label: "50米跑",
    value: "fiftyRun",
    unit: "秒 毫秒",
    score: "fiftyRunScore",
    level: "fiftyRunLevel",
  },
  {
    label: "立定跳远",
    value: "standingLongJump",
    unit: "厘米",
    score: "standingLongJumpScore",
    level: "standingLongJumpLevel",
  },

  {
    label: "坐位提前屈",
    value: "sittingForwardFlexion",
    unit: "厘米",
    score: "sittingForwardFlexionScore",
    level: "sittingForwardFlexionLevel",
  },
  {
    label: sex.value === "男" ? "1000米跑" : "800米跑",
    value: "thousandRun",
    unit: "分 秒",
    score: "thousandRunScore",
    level: "thousandRunLevel",
  },
  {
    label: sex.value === "男" ? "引体向上" : "一分钟仰卧起坐",
    value: "pullUpOrOneMinuteSitUps",
    unit: "个",
    score: "pullUpOrOneMinuteSitUpsScore",
    level: "pullUpOrOneMinuteSitUpsLevel",
  },
];
const currentRate = ref<number>(0);
const text = computed(() => currentRate.value + "分");
const count = ref(0);
const loading = ref(false);
const ShowOrNot=ref(true)
const onRefresh = () => {
  getUserInfo(router.query.account,router.query.schoolYear);
  setTimeout(() => {
    Toast("刷新成功");
    loading.value = false;
    count.value++;
  }, 1000);
};
onMounted(() => {
  getUserInfo(router.query.account,router.query.schoolYear);
});

async function getUserInfo(studentNum:any,schoolYear:any) {
  try {
    const { data } = await info(studentNum,schoolYear);
    // userInfo = _data;
    if(data.data.data==null){
      ShowOrNot.value=false
    }
    userInfo.value = data.data.data;
    sex.value = data.data.data.sex;
    if (sex.value === "男") {
      gradetableData[5].label = "1000米跑";
      gradetableData[6].label = "引体向上";
    } else {
      gradetableData[5].label = "800米跑";
      gradetableData[6].label = "一分钟仰卧起坐";
    }
    currentRate.value = data.data.data.totalTestScore;
    // console.log(userInfo);
  } catch (error) {}
}

// console.log(userInfo.value);

//判断tag颜色
function GradeRule(value:any) {
  if (value >= 80 && value <= 100) {
    return {
      text: "",
      color: "success",
    };
  }
  if (value >= 60) {
    return {
      text: "",
      color: "primary",
    };
  }
 
  return {
    text: "",
    color: "danger",
  };
}
function toScoreInfo(){

  route.push({path:'/scoreinfo'})

}
</script>
<style lang="less" scoped>
.mainShow{
  height: 60rem;
  // background-color: aqua;
}
.studentInfo {
  height: 4rem;
  white-space: nowrap;
  // background-color: aqua;
  padding: 1rem;
  // overflow: hidden;
  margin: 1.3rem 1rem;
  border-radius: 0.8rem;
  box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem gainsboro;
  .nameaccount {
    display: flex;
    justify-content: space-around;
    margin-top: 00.5rem;
  }
  .userInfo {
    display: flex;
    justify-content: space-between;
    padding-bottom: 0.8rem;
    border-bottom: gainsboro 0.01rem solid;
    .timer {
      font-size: 00.5rem;
      color: #888888;
    }
  }
}
.allGarde {
  border-radius: 0.8rem;
  display: flex;
  justify-content: space-around;
  padding: 1rem;
  background-color: #fff;
  box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem gainsboro;
  margin-bottom: 1rem;
  margin: 1rem;
  .scoreLevel {
    margin-top: 1rem;
    .buttons {
      padding: 2rem;
      border-radius: 1rem;
    }
  }
}
.gardeBox {
  border-radius: 0.8rem;
  // width: 100%;
  // height: 2rem;
  padding: 1rem 1rem;
  margin: 0rem 1rem;
  font-size: 0.8rem;
  background-color: #fff;
  box-shadow: 0.1rem 0.1rem 0.1rem 0.1rem gainsboro;
  div {
    display: flex;
    //   justify-content: space-around;
    .danwei {
      font-size: 00.5rem;
      color: gainsboro;
      line-height: 1.5rem;
    }
  }
  .line {
    text-align: center;
    margin-bottom: 1rem;
    .one {
      // background-color: #888888;
      width: 40%;
    }
    .two {
      width: 24%;
      margin-left: 00.5rem;
    }
    .three {
      width: 20%;
    }
    .four {
      width: 20%;
      text-align: center;
    }
  }
}
.toScoreInfo{
  margin: 1rem;
  width: 100%;
  height: 2rem;
  color: #f4b89e;
  // text-align: center;
  
   text-decoration: underline #f4b89e;
}
</style>
